<script setup>
import {setCache} from "@/utils/cache";
import {TOKEN_KEY} from "@/enums/cacheEnum";
import {useRouter} from "vue-router";
import {onBeforeMount, onMounted, onUnmounted, reactive} from "vue";
import useDraw from "@/utils/useDraw";
import {createDiscreteApi, darkTheme, lightTheme} from "naive-ui";
import { PersonOutline, LockClosedOutline, ShieldCheckmarkOutline,} from "@vicons/ionicons5";
import {getValidCodeApi} from "@/api";
import {useAuthStore} from "@/store/auth";
import CryptoJS from "crypto-js";
import { sha256 } from 'js-sha256';
// const { message: Message, notification: Notification, dialog: Dialog, loadingBar } = createDiscreteApi(
//     ["message", "dialog", "notification", "loadingBar"],
//     {
//         configProviderProps: { theme: darkTheme }
//     }
// );

// * 适配处理
const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()

onBeforeMount(() => {
    getCode();
})

onMounted(() => {
    windowDraw();
    calcRate();

})
onUnmounted(() => {
    unWindowDraw();
})

const router = useRouter()
const authStore = useAuthStore();

const formRef = ref(null);
const model = reactive({
    username: "",
    password: "",
    code: "",
    uuid: ""
})
const loginRules = reactive({
    username: [
        { required: true, trigger: "blur", message: "请输入您的账号" }
    ],
    password: [
        { required: true, trigger: "blur", message: "请输入您的密码" }
    ],
    code: [
        { required: true, trigger: "change", message: "请输入验证码" }
    ]
})

// 验证码开关
const captchaEnabled = ref(true);
const codeUrl = ref('');
const loading = ref(false);

const handleLogin = (e) => {

    e.preventDefault();
    formRef.value.validate(async (errors) => {
        if (!errors) {
            window.$Message.success("验证成功");
            loading.value = true;
            const params = {
                username: model.username,
                password: CryptoJS.SHA256(model.password).toString(),
                // password: sha256(model.password),
                code: model.code,
                uuid: model.uuid
            }
            await authStore.login(params)

            setTimeout(() => {
                router.push('/')
            }, 500)
        } else {
            console.log(errors);
            window.$Message.error("验证失败");

        }
    });


}

// 获取验证码
const getCode = async () => {
    const res = await getValidCodeApi()
    console.log('验证码res-----------', res)
    if (res.code === 1) {
        codeUrl.value = res.data.img;
        model.uuid = res.data.uuid;
    }
}


</script>

<template>
<div ref="appRef" id="wrap">

<!--    <n-config-provider :theme="lightTheme" >-->
    <div class="full">
        <n-form ref="formRef" :model="model" :rules="loginRules" class="login-form" size="medium" :show-label="false">
            <div class="text-center text-18px mb-30px">
                <div class="font-bold ">呼和浩特市第五次经济普查</div>
                <div class="font-bold ">单位清查数据分析平台</div>
            </div>
            <n-form-item path="username" >
                <n-input
                    v-model:value="model.username"
                    type="text"
                    auto-complete="off"
                    placeholder="账号"
                    @keydown.enter.prevent
                >
                    <template #prefix>
                        <n-icon :component="PersonOutline" size="16" />
                    </template>
                </n-input>
            </n-form-item>
            <n-form-item path="password">
                <n-input
                    v-model:value="model.password"
                    type="password"
                    auto-complete="off"
                    placeholder="密码"
                    @keyup.enter.native="handleLogin"
                    show-password-on="mousedown"
                    @keydown.enter.prevent
                >
                    <template #prefix>
                        <n-icon :component="LockClosedOutline" size="16" />
                    </template>
                </n-input>
            </n-form-item>
            <n-form-item path="code" v-if="captchaEnabled">
                <n-input
                    v-model:value="model.code"
                    auto-complete="off"
                    placeholder="验证码"
                    style="width: 70%;"
                    @keyup.enter.native="handleLogin"
                    @keydown.enter.prevent
                >
                    <template #prefix>
                        <n-icon :component="ShieldCheckmarkOutline" size="16" />
                    </template>
                </n-input>
                <div class="w-30% flex justify-end cursor-pointer">
                    <img :src="codeUrl" class="h-38px" @click="getCode" style="display: block;"  alt=""/>
                </div>
            </n-form-item>
            <!--        <n-checkbox v-model="model.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</n-checkbox>-->
            <n-form-item style="width:100%;">
                <n-button
                    :loading="loading"
                    size="medium"
                    type="info"
                    style="width:100%;"
                    @click.native.prevent="handleLogin"
                >
                    <span v-if="!loading">登 录</span>
                    <span v-else>登 录 中...</span>
                </n-button>
            </n-form-item>
        </n-form>
    </div>
<!--    </n-config-provider>-->
</div>
</template>

<style lang="scss" scoped>
#wrap{
    color: #d3d6dd;
    width: var(--baseWidth);
    height: var(--baseHeight);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: left top;
    background-image: url("@/assets/images/login-background3.jpeg");
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.full{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-form{
    border-radius: 6px;
    background: rgba(0, 0, 0, .3);
    width: 400px;
    padding: 25px 25px 15px 25px;
}

</style>
